<template>
  <div class="index">
    <commonHeader></commonHeader>
    <div class="banner">
      <img class="banner-img"
        :src="newsDetail.picture" alt="">
    </div>


    <div class="newsDetail">
      <div class="tit">{{newsDetail.title}}</div>
      <div class="date">{{createtime}}</div>
      <div class="detail" v-html="newsDetail.content"></div>
      <div class="more-wrap">
        <!-- <div class="more" @click.nactive="$router.go(-1)">
          返回
        </div> -->



        <!-- <div class="more" to="/hello/news" >
          返回
        </div> -->

        <router-link class="more" to="/hello/news">返回</router-link>


      </div>
    </div>
    <div class="recommend">
      <div class="common-tit">
        <div class="text">推荐阅读</div>
        <!-- <div class="introduct">开启私密年轻新时代</div> -->
      </div>
      <div class="recommend-con">
        <div class="item" v-for="(item, index) in newsListTop" :key="index">
          <router-link class="item-tit ellipsis_two_line" @click.native="NewsDetailFun" :to="{path: '/hello/newsDetail', query: {id: item.id}}">
            {{item.title}}
          </router-link>
          <router-link class="item-con ellipsis_two_line" @click.native="NewsDetailFun" :to="{path: '/hello/newsDetail', query: {id: item.id}}">
            {{item.description}}
          </router-link>
        </div>
        <!-- <div class="item">
          <router-link class="item-tit" to>
            惠元医院品牌战略发布暨中国女性生殖大健康创新医疗高峰论坛
          </router-link>
          <router-link class="item-con" to>
            2019.12.16-17全球女性私密健康管理全科医院惠元幸福医院品牌战略发布会
          </router-link>
        </div>
        <div class="item">
          <router-link class="item-tit" to>
            惠元医院品牌战略发布暨中国女性生殖大健康创新医疗高峰论坛
          </router-link>
          <router-link class="item-con" to>
            2019.12.16-17全球女性私密健康管理全科医院惠元幸福医院品牌战略发布会
          </router-link>
        </div> -->

      </div>
    </div>




    <commonFooter></commonFooter>
  </div>

</template>

<script lang="ts">


  // ajax
  import { NewsDetail, NewsListTop } from "@/assets/js/api";

  import { Component, Vue } from "vue-property-decorator";
  import commonHeader from "@/components/headers.vue";
  import commonFooter from "@/components/footer.vue";

  @Component({
    name: "newsDetail",
    components: {
      commonHeader,
      commonFooter,
    },
  })


    export default class newsDetail extends Vue {
        active = 0;
        newsDetail = [];
        // 置顶新闻
        newsListTop = [];
        createtime = null;


        get swiper(): any {
      console.log(this.$refs, "this.$refs.mySwiper1")
      return this.$refs.mySwiper.$swiper;
    }


      
      NewsDetailFun() {
        NewsDetail({ id: this.$route.query.id }).then((response) => {
          // console.log(response.data, "新闻详情")
          if (response.data.ReturnCode == 0) {
            if (response.data.Data) {
              var data = response.data.Data;
              this.newsDetail = data[0];
              let createtime = this.newsDetail.createtime;
              // console.log(this.createtime.split(" "))
              createtime = createtime.split(" ");
              // replace替换字符串中所有的某个字符
              // https://blog.csdn.net/weixin_41297324/article/details/107733937

              this.createtime = createtime[0].replace(/\//g, '.');
            }
          }
        });

      }


    mounted() {

      this.NewsDetailFun();



      // 置顶新闻
      NewsListTop().then((response) => {
        // console.log(response.data, "置顶新闻")
        if (response.data.ReturnCode == 0) {
          if (response.data.Data) {
            var data = response.data.Data;
            // this.ListBanner = data[0].ListBanner;
            this.newsListTop = data;
          }
        }
      });





    }

    // watch: {
    //   // 刷新页面
    //   $route(to, from) {
    //     this.$router.go(0)
    //   }
    // }

  }
</script>


<style lang="scss" scoped>
  @import '~@/assets/scss/newsDetail.scss';
</style>